<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello 首页</title>
    <style>
      /* 基础样式重置 */
      * {
        box-sizing: border-box;
      }
      
      body {
        margin: 0;
        padding: 15px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
      }

      h1, h2, h3, h4 {
        margin-top: 1.2em;
        margin-bottom: 0.5em;
      }

      p {
        margin-top: 0.5em;
        margin-bottom: 1em;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      /* 原有的居中方法样式 */
      /* 方法1: 使用text-align居中（适用于行内元素或行内块元素） */
      .center-align {
        text-align: center;
      }

      /* 方法2: 使用margin: 0 auto居中（适用于块级元素） */
      .center-margin {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
      }

      /* 方法3: 使用flexbox居中 */
      .center-flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
      }

      /* 方法4: 使用绝对定位和transform居中 */
      .center-absolute-container {
        position: relative;
        height: 200px;
      }
      
      .center-absolute {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* 方法5: 使用grid布局居中 */
      .center-grid-container {
        display: grid;
        place-items: center;
        height: 200px;
      }

      /* 响应式设计 */
      /* 默认为移动端样式 */
      .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
      }

      /* 平板端样式 */
      @media screen and (min-width: 768px) {
        body {
          padding: 25px;
        }
        
        .container {
          max-width: 750px;
          padding: 0 20px;
        }
        
        .center-margin {
          width: 60%;
        }
        
        h1 {
          font-size: 2em;
        }
        
        h2 {
          font-size: 1.7em;
        }
        
        h3 {
          font-size: 1.4em;
        }
        
        h4 {
          font-size: 1.2em;
        }
      }

      /* PC端样式 */
      @media screen and (min-width: 1024px) {
        body {
          padding: 35px;
        }
        
        .container {
          max-width: 1000px;
          padding: 0 30px;
        }
        
        .center-margin {
          width: 50%;
        }
        
        h1 {
          font-size: 2.5em;
        }
        
        h2 {
          font-size: 2em;
        }
        
        h3 {
          font-size: 1.7em;
        }
        
        h4 {
          font-size: 1.4em;
        }
        
        .center-flex-container,
        .center-absolute-container,
        .center-grid-container {
          height: 250px;
        }
      }

      /* 大屏PC端样式 */
      @media screen and (min-width: 1200px) {
        body {
          padding: 45px;
        }
        
        .container {
          max-width: 1200px;
        }
        
        .center-margin {
          width: 40%;
        }
        
        h1 {
          font-size: 2.8em;
        }
        
        h2 {
          font-size: 2.3em;
        }
        
        h3 {
          font-size: 1.9em;
        }
        
        h4 {
          font-size: 1.6em;
        }
      }

      /* 为居中示例添加一些视觉样式 */
      .center-flex-container,
      .center-absolute-container,
      .center-grid-container {
        background-color: #f5f5f5;
        margin: 15px 0;
        border-radius: 5px;
      }

      details {
        margin: 15px 0;
        padding: 10px;
        background-color: #f9f9f9;
        border-radius: 5px;
      }

      summary {
        font-weight: bold;
        cursor: pointer;
      }

      code {
        background-color: #f1f1f1;
        padding: 2px 6px;
        border-radius: 3px;
      }

      progress, meter {
        width: 100%;
        max-width: 300px;
      }

      ruby {
        font-size: 1.2em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>前端开发</h1>
      <p>
        掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
      </p>
      <p>
        HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。
      </p>
      <h2>CSS</h2>
      <p>学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。</p>
      
      <h3>图片居中方法示例：</h3>
      
      <!-- 方法1: text-align -->
      <h4>1. 使用 text-align: center</h4>
      <div class="center-align">
        <img src="https://via.placeholder.com/150" alt="示例图片">
      </div>
      
      <!-- 方法2: margin auto -->
      <h4>2. 使用 margin: 0 auto</h4>
      <img class="center-margin" src="https://via.placeholder.com/150" alt="示例图片">
      
      <!-- 方法3: flexbox -->
      <h4>3. 使用 Flexbox</h4>
      <div class="center-flex-container">
        <img src="https://via.placeholder.com/150" alt="示例图片">
      </div>
      
      <!-- 方法4: absolute + transform -->
      <h4>4. 使用绝对定位</h4>
      <div class="center-absolute-container">
        <img class="center-absolute" src="https://via.placeholder.com/150" alt="示例图片">
      </div>
      
      <!-- 方法5: grid -->
      <h4>5. 使用 Grid</h4>
      <div class="center-grid-container">
        <img src="https://via.placeholder.com/150" alt="示例图片">
      </div>

      <h2>JavaScript</h2>
      <p>
        学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
      </p>

      <details>
        <summary>点击查看详情</summary>
        <p>这里是隐藏的内容，点击摘要时会展开。</p>
      </details>
      <details>
        <summary>点击查看详情</summary>
        <p>这里是隐藏的内容，点击摘要时会展开。</p>
      </details>

      <code>this is code</code>

      <label for="file">下载进度：</label>
      <progress id="file" value="70" max="100">70%</progress><br />

      <label for="disk">磁盘使用：</label>
      <meter id="disk" value="0.6">60%</meter><br>

      <ruby> 基础文本 <rp>(</rp><rt>注音内容</rt><rp>)</rp> </ruby>

      <!-- 给 汉字 添加拼音-->
      <ruby>汉<rp>(</rp><rt>Hàn</rt><rp>)</rp>字<rp>(</rp><rt>zì</rt><rp>)</rp></ruby>
    </div>
  </body>
</html>